<template>
  <view class="center">
    <view class="logo"  :hover-class="!login ? 'logo-hover' : ''">
      <image class="logo-img" :src=userInfo.avatar></image>
      <view class="logo-title">
        <button  plain class="uer-name" open-type="getUserInfo" @getuserinfo="handleGetUserInfo" >{{login ? userInfo.name : '点击登录/注册'}}</button>
        <text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item border-bottom">
        <text class="list-icon">&#xe60f;</text>
        <text class="list-text" @click="accountManage">帐号管理</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
      <view class="center-list-item">
        <text class="list-icon">&#xe639;</text>
        <text class="list-text">新消息通知</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item border-bottom">
        <text class="list-icon">&#xe60b;</text>
        <text class="list-text">帮助与反馈</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
      <view class="center-list-item">
        <text class="list-icon">&#xe65f;</text>
        <text class="list-text">服务条款及隐私</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item">
        <text class="list-icon">&#xe614;</text>
        <text class="list-text">关于应用</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
    </view>
    <!-- 在MPVue中使用 `mp-soure` 替代 `soure` -->
    <mp-soure :url="url"></mp-soure>
  </view>
</template>

<script>

import config from "../../config";

export default {
  data() {
    return {
      url: 'https://ext.dcloud.net.cn/plugin?id=38',
      login: false,
      userInfo: {
      },
    };
  },
  onShow(){
    let value=wx.getStorageSync("outFlag")
     if(value){
       this.userInfo=''
       this.login=false
       wx.removeStorageSync("outFlag")
     }
     value=wx.getStorageSync("updateAvatar")

    if(value){
       this.userInfo=null
       this.userInfo=JSON.parse(wx.getStorageSync("userInfo"))
       this.login=true;
       wx.removeStorageSync("updateAvatar")
     }
  },
  methods: {
    accountManage(){
      wx.navigateTo({
        url:'/pages/accountManage/main'
      })
    },
    handleGetUserInfo(res){

      const loginUrl=config.loginUrl
      let currentUser = res.target.userInfo;
      wx.login({
        success:(res)=>{
          if(res.code){
            wx.request({
              method: 'POST',
              url:loginUrl,
              data:{
                code:res.code
              },
              success:(loginRes)=>{
                console.log(loginRes.data.data)
                wx.setStorage({
                  key:"userInfo",
                  data:JSON.stringify(loginRes.data.data)
                })
                this.userInfo=null
                this.userInfo=JSON.parse(wx.getStorageSync("userInfo"))
                this.login=true;

              }
            })
          }
        }
      })

    }
  },
};
</script>

<style lang="stylus">
@font-face
  font-family: texticons
  font-weight: normal
  font-style: normal
  src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype')

page, view
  display: flex

page
  background-color: #f8f8f8

.center
  flex-direction: column
  margin-left -5px

.logo
  width: 100vw
  height: 30vh
  padding: 4vw
  box-sizing: border-box
  background-color: #a9c6b6
  flex-direction: row
  align-items: center

.logo-hover
  opacity: 0.8

.logo-img
  width: 20vw
  height: 20vw
  border-radius: 20vw

.logo-title
  height: 20vw
  flex: 1
  align-items: center
  justify-content: space-between
  flex-direction: row
  margin-left: 4vw

.uer-name
  border-style hidden
  border 0
  height: 8vw
  line-height: 8vw
  font-size: 4.5vw
  color: #FFFFFF

.go-login.navigat-arrow
  font-size: 5vw
  color: #FFFFFF

.login-title
  height: 20vw
  align-items: self-start
  justify-content: center
  flex-direction: column
  margin-left: 4vw

.center-list
  background-color: #FFFFFF
  margin-top: 4vw
  width: 100vw
  flex-direction: column

.center-list-item
  height: 13vw
  width: 100vw
  box-sizing: border-box
  flex-direction: row
  padding: 0 4vw

.border-bottom
  border-bottom-width: 1px
  border-color: #c8c7cc
  border-bottom-style: solid

.list-icon
  width: 4vw
  height: 13vw
  line-height: 13vw
  font-size: 3.4vw
  color: #4cd964
  text-align: center
  font-family: texticons
  margin-right: 4vw

.list-text
  height: 13vw
  line-height: 13vw
  font-size: 3.4vw
  color: #555
  flex: 1
  text-align: left

.navigat-arrow
  height: 13vw
  width: 4vw
  line-height: 13vw
  font-size: 3.4vw
  color: #555
  text-align: right
  font-family: texticons
</style>
